<template>
  <div class="product-detail-page">
    <div class="container">
      <el-skeleton v-if="loading" :rows="8" animated />
      
      <div v-else-if="product" class="product-detail">
        <!-- Breadcrumb -->
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">Home</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/products' }">Products</el-breadcrumb-item>
          <el-breadcrumb-item>{{ product.name_en }}</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- Product Content -->
        <el-row :gutter="40" class="product-content">
          <!-- Image Gallery -->
          <el-col :xs="24" :md="12">
            <div class="product-gallery">
              <div class="main-image">
                <el-image 
                  :src="currentImage" 
                  :alt="product.name_en"
                  fit="contain"
                  :preview-src-list="allImages"
                />
                <div v-if="product.is_hot" class="hot-badge">
                  <n-icon size="20"><FlameOutline /></n-icon>
                  HOT ITEM
                </div>
              </div>
              
              <div v-if="allImages.length > 1" class="thumbnail-list">
                <div 
                  v-for="(img, index) in allImages" 
                  :key="index"
                  class="thumbnail"
                  :class="{ active: currentImage === img }"
                  @click="currentImage = img"
                >
                  <el-image :src="img" fit="cover" />
                </div>
              </div>
            </div>
          </el-col>

          <!-- Product Info -->
          <el-col :xs="24" :md="12">
            <div class="product-info">
              <h1 class="product-title">{{ product.name_en }}</h1>
              <div class="product-category">
                <n-icon size="20"><PricetagOutline /></n-icon>
                {{ product.category_name_en }}
              </div>

              <div class="product-description">
                <h3>Description</h3>
                <p>{{ product.description || 'High quality African fashion product' }}</p>
              </div>

              <div v-if="product.material" class="product-specs">
                <h3>Material</h3>
                <p>{{ product.material }}</p>
              </div>

              <div v-if="product.colors && product.colors.length" class="product-colors">
                <h3>Available Colors</h3>
                <div class="color-list">
                  <div 
                    v-for="(color, index) in product.colors" 
                    :key="index"
                    class="color-item"
                    :style="{ backgroundColor: color }"
                    :title="color"
                  ></div>
                </div>
              </div>

              <div v-if="product.sizes && product.sizes.length" class="product-sizes">
                <h3>Available Sizes</h3>
                <div class="size-list">
                  <span 
                    v-for="(size, index) in product.sizes" 
                    :key="index"
                    class="size-item"
                  >
                    {{ size }}
                  </span>
                </div>
              </div>

              <!-- Contact Actions -->
              <div class="contact-actions">
                <el-button 
                  type="primary" 
                  size="large" 
                  @click="contactWhatsApp"
                  :icon="LogoWhatsapp"
                >
                  Contact via WhatsApp
                </el-button>
                <el-button 
                  size="large" 
                  @click="contactWeChat"
                  :icon="ChatbubbleEllipsesOutline"
                >
                  Contact via WeChat
                </el-button>
              </div>

              <!-- Shipping Info -->
              <el-alert
                type="info"
                :closable="false"
                show-icon
              >
                <template #title>
                  <div style="display: flex; align-items: center; gap: 0.5rem;">
                    <n-icon size="20"><AirplaneOutline /></n-icon>
                    <span>{{ appStore.storeInfo.shipping_info || 'We support DHL, air freight, and sea freight shipping options.' }}</span>
                  </div>
                </template>
              </el-alert>
            </div>
          </el-col>
        </el-row>
      </div>

      <el-result v-else icon="warning" title="Product Not Found" />
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, h } from 'vue'
import { useRoute } from 'vue-router'
import { NIcon } from 'naive-ui'
import {
  FlameOutline,
  PricetagOutline,
  AirplaneOutline,
  ChatbubbleEllipsesOutline,
  LogoWhatsapp
} from '@vicons/ionicons5'
import { ElMessage } from 'element-plus'
import { useAppStore } from '@/stores/app'
import { productAPI } from '@/api'

const route = useRoute()
const appStore = useAppStore()

const product = ref(null)
const loading = ref(false)
const currentImage = ref('')

const allImages = computed(() => {
  if (!product.value) return []
  const images = [product.value.main_image]
  if (product.value.images && product.value.images.length) {
    images.push(...product.value.images)
  }
  return images
})

const loadProduct = async () => {
  try {
    loading.value = true
    const id = route.params.id
    const response = await productAPI.getById(id)
    if (response.success) {
      product.value = response.data
      currentImage.value = response.data.main_image
    }
  } catch (error) {
    console.error('Failed to load product:', error)
    ElMessage.error('Failed to load product')
  } finally {
    loading.value = false
  }
}

const contactWhatsApp = () => {
  const whatsapp = appStore.storeInfo.whatsapp
  if (whatsapp) {
    const message = `Hi, I'm interested in ${product.value.name_en}`
    const url = `https://wa.me/${whatsapp.replace(/\s/g, '')}?text=${encodeURIComponent(message)}`
    window.open(url, '_blank')
  } else {
    ElMessage.warning('WhatsApp contact not available')
  }
}

const contactWeChat = () => {
  ElMessage.info('Please scan the WeChat QR code in the floating contact button')
}

onMounted(() => {
  loadProduct()
})
</script>

<style lang="scss" scoped>
.product-detail-page {
  padding: 2rem 0 4rem;
}

.product-detail {
  :deep(.el-breadcrumb) {
    margin-bottom: 2rem;
  }
}

.product-content {
  margin-top: 2rem;
}

.product-gallery {
  position: sticky;
  top: 100px;
}

.main-image {
  position: relative;
  background-color: var(--color-gray-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 1rem;
  
  :deep(.el-image) {
    width: 100%;
    height: 500px;
  }
}

.hot-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: linear-gradient(135deg, #FF6B6B, #FF4757);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 25px;
  font-size: 0.875rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: var(--shadow-lg);
}

.thumbnail-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 0.5rem;
}

.thumbnail {
  cursor: pointer;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 2px solid transparent;
  transition: var(--transition-fast);
  
  &.active {
    border-color: var(--color-primary);
  }
  
  &:hover {
    border-color: var(--color-primary-light);
  }
  
  :deep(.el-image) {
    width: 100%;
    height: 80px;
  }
}

.product-info {
  h3 {
    font-size: 1.125rem;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
  }
}

.product-title {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--text-primary);
}

.product-category {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background-color: var(--color-primary-light);
  color: var(--color-accent);
  border-radius: 20px;
  font-weight: 500;
  margin-bottom: 2rem;
}

.product-description,
.product-specs,
.product-colors,
.product-sizes {
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--color-gray-light);
  
  p {
    color: var(--text-secondary);
    line-height: 1.8;
  }
}

.color-list {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.color-item {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 3px solid white;
  box-shadow: 0 0 0 1px var(--color-gray), var(--shadow-sm);
  cursor: pointer;
  transition: var(--transition-fast);
  
  &:hover {
    transform: scale(1.1);
  }
}

.size-list {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.size-item {
  padding: 0.5rem 1rem;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-md);
  font-weight: 500;
  color: var(--color-primary);
  transition: var(--transition-fast);
  cursor: pointer;
  
  &:hover {
    background-color: var(--color-primary);
    color: white;
  }
}

.contact-actions {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  
  :deep(.el-button) {
    flex: 1;
    min-width: 200px;
  }
}

@media (max-width: 768px) {
  .product-gallery {
    position: static;
    margin-bottom: 2rem;
  }
  
  .main-image :deep(.el-image) {
    height: 300px;
  }
  
  .product-title {
    font-size: 1.5rem;
  }
  
  .contact-actions {
    flex-direction: column;
    
    :deep(.el-button) {
      width: 100%;
    }
  }
}
</style>

